<template>
  <div class="search">
    <Card>
      <Form ref="searchForm" :model="searchForm" inline :label-width="85" class="search-form">
        <Form-item label="会员名称" prop="memberName">
          <Input type="text" v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 200px" />
        </Form-item>
        <Form-item label="手机号" prop="mobile">
          <Input type="text" v-model="searchForm.mobile" placeholder="请输入手机号" clearable style="width: 200px" />
        </Form-item>
        <Form-item label="店铺名称" prop="storeName">
          <Input type="text" v-model="searchForm.storeName" placeholder="请输入店铺名称" clearable style="width: 200px" />
        </Form-item>
        <Form-item label="店铺状态">
          <Select v-model="searchForm.storeDisable" clearable style="width: 200px">
            <Option value="OPEN">开启中</Option>
            <Option value="CLOSED">已关闭</Option>
            <Option value="APPLY">申请中</Option>
            <Option value="APPLYING">审核中</Option>
            <Option value="REFUSED">审核拒绝</Option>
          </Select>
        </Form-item>
        <Form-item label="创建时间" prop="createTime">
          <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable
            @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
        </Form-item>
        <Form-item label="订单时间" prop="orderTime">
          <DatePicker v-model="orderDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable
            @on-change="selectOrderRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
        </Form-item>
        <Form-item label="是否推荐" prop="recommend">
          <Select v-model="searchForm.recommend" placeholder="请选择" clearable style="width: 200px">
            <Option value="">全部</Option>
            <Option :value="1">推荐</Option>
            <Option :value="0">不推荐</Option>
          </Select>
        </Form-item>
        <Form-item label="区域" prop="region">
          <region style="width: 350px" @selected="selectedRegionSearch" />
        </Form-item>
        <Form-item label="推广人姓名" prop="nameExte">
          <Input type="text" v-model="searchForm.nameExte" placeholder="请输入推广人姓名" clearable style="width: 200px" />
        </Form-item>
        <Form-item label="推广人手机号" prop="mobileExte">
          <Input type="text" v-model="searchForm.mobileExte" placeholder="请输入推广人手机号" clearable style="width: 200px" />
        </Form-item>
        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
      </Form>
      <Row class="operation padding-row">
        <Button @click="add" type="primary">添加</Button>
      </Row>
      <Table :loading="loading" border :columns="columns" :data="data" ref="table"></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
          @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total
          show-elevator show-sizer></Page>
      </Row>
    </Card>
    <Modal title="推荐操作" v-model="recommendModalVisible" :mask-closable="false" :width="500">
      <Form ref="recommendForm" :model="recommendForm" :label-width="100">
        <FormItem label="推荐排名" prop="recommendRanking">
          <Input v-model="recommendForm.recommendRanking" clearable style="width: 80%" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="recommendCancel">取消</Button>
        <Button type="primary" :loading="recommendSubmitLoading" @click="recommendSubmit">提交</Button>
      </div>
    </Modal>
    <Modal title=" "  v-model="qrcodeModalVisible" :mask-closable="false" :width="480">
      <div style="text-align: center;margin: 26px;">
        <div style="background-color:#ffe700;padding: 50px;height: 500px;">
          <div style="background-color:#fff;height: 320px;">
            <div style="background-color:rgb(244 244 244);margin-bottom: 10px;color: #f4d75b;font-size: 16px;height: 50px;line-height: 50px;">商家二维码收款</div>
            <vue-qr :text="testid"></vue-qr>
            <div style="font-size: 22px;font-weight: 700;">{{storeName}}</div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <!-- <div style="text-align:left;font-size:18px;">店铺：{{storeName}}</div> -->
      </div>
    </Modal>
  </div>
</template>

<script>
  import {
    getShopListData,
    closeShop,
    enableBrand,
    shopAudit,
    updateRecommendShops,
  } from "@/api/shops"
  import region from "./region"
  import vueQr from 'vue-qr'
  export default {
    name: "shop",
    components: {
      region,
      vueQr
    },
    data() {
      return {
        storeName: '',
        testid: '',
        loading: true, // 表单加载状态
        recommendSubmitLoading: false, //添加推荐按钮加载中状态
        recommendModalVisible: false, //添加推荐显示弹窗
        qrcodeModalVisible: false, //收款码显示弹窗
        recommendForm: {
          storeId: "", //商品id
          recommend: true,
          recommendRanking: "", //推荐等级
        },
        searchForm: {
          groupBySort: true,
          // 搜索框初始化对象
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          sort: "createTime", // 默认排序字段
          order: "desc", // 默认排序方式
          startDate: "", // 起始时间
          endDate: "", // 终止时间
          orderStartDate: "", // 订单起始时间
          orderEndDate: "", // 订单终止时间
          region: "",
          regionId: "",
          recommend: "",
          mobile: '', // 手机号
          mobileExte: '',
          nameExte: '',
        },
        selectDate: null, // 创建时间
        orderDate: null, // 订单时间
        columns: [
          // 表头
          {
            title: "店铺名称",
            key: "storeName",
            minWidth: 120,
            align: "left",
          },
		  {
			title: "店铺扣率",
			key: "discount",
			minWidth: 120,
			align: "left",
		  },
          {
            title: "手机号",
            key: "mobile",
            minWidth: 120,
            align: "left",
          },
          {
            title: "会员名称",
            key: "nickName",
            minWidth: 130,
            tooltip: true,
          },
          {
            title: "推广人姓名",
            key: "nameExte",
            width: "250",
            tooltip: true,
          },
          {
            title: "推广人手机号",
            key: "mobileExte",
            width: "250",
            tooltip: true,
          },
          {
            title: "店铺地址",
            key: "storeAddressPath",
            width: 300,
            tooltip: true,
            render: (h, params) => {
              return h("Tag", {}, params.row.storeAddressPath || "暂未填写")
            },
          },
          {
            title: "店铺类型",
            key: "selfOperated",
            align: "left",
            width: 120,
            render: (h, params) => {
              return h(
                "Tag", {
                  props: {
                    color: params.row.selfOperated ? "volcano" : "green",
                  },
                },
                params.row.selfOperated + '' === '0' ? "商圈店铺" : params.row.selfOperated + '' === '1' ? "电商店铺" : ''
              )
            },
          },
          {
            title: "订单总数",
            key: "orderCount",
            width: 100,
            align: "center"
          },
          {
            title: "订单总焕贝额",
            key: "orderMoney",
            width: 120,
            align: "center"
          },
          {
            title: "评分",
            key: "score",
            width: 80,
            align: "center"
          },
          {
            title: "被收藏数",
            key: "collectionNum",
            width: 80,
            align: "center"
          },
          {
            title: "店铺状态",
            key: "storeDisable",
            align: "left",
            width: 130,
            render: (h, params) => {
              if (params.row.storeDisable == "OPEN") {
                return h("Tag", {
                  props: {
                    color: "green"
                  }
                }, "开启中")
              } else if (params.row.storeDisable == "CLOSED") {
                return h("Tag", {
                  props: {
                    color: "volcano"
                  }
                }, "已关闭")
              } else if (params.row.storeDisable == "APPLY") {
                return h("Tag", {
                  props: {
                    color: "geekblue"
                  }
                }, "申请中")
              } else if (params.row.storeDisable == "APPLYING") {
                return h("Tag", {
                  props: {
                    color: "purple"
                  }
                }, "审核中")
              } else if (params.row.storeDisable == "REFUSED") {
                return h("Tag", {
                  props: {
                    color: "red"
                  }
                }, "审核拒绝")
              }
            }
          },
          {
            title: "店铺排名",
            key: "sort",
            align: "left",
            width: 120,
          },
          {
            title: "推荐排名",
            key: "recommendRanking",
            align: "left",
            width: 120,
          },
          {
            title: "创建时间",
            key: "createTime",
            align: "left",
            width: 170,
            sortable: true,
          },
          {
            title: "操作",
            key: "action",
            width: 380,
            align: "center",
            fixed: "right",
            render: (h, params) => {
              let enableOrDisable = ""
              if (params.row.storeDisable == "OPEN") {
                enableOrDisable = h(
                  "Button", {
                    props: {
                      size: "small",
                      type: "error",
                    },
                    style: {
                      marginRight: "5px",
                    },
                    on: {
                      click: () => {
                        this.disable(params.row);
                      },
                    },
                  },
                  "关闭"
                );
              } else if (params.row.storeDisable == "CLOSED") {
                enableOrDisable = h(
                  "Button", {
                    props: {
                      type: "success",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                    },
                    on: {
                      click: () => {
                        this.enable(params.row);
                      },
                    },
                  },
                  "开启"
                );
              }
              return h("div", [
                h(
                  "Button", {
                    props: {
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                      display: this.selectedShop ? "inline-block" : "none",
                    },
                    on: {
                      click: () => {
                        this.callback(params.row)
                      },
                    },
                  },
                  "选择"
                ),
                h(
                  "Button", {
                    props: {
                      type: "info",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                    },
                    on: {
                      click: () => {
                        this.detail(params.row)
                      },
                    },
                  },
                  "查看"
                ),
                h(
                  "Button", {
                    props: {
                      type: "info",
                      size: "small",
                      ghost: true,
                    },
                    style: {
                      marginRight: "5px",
                    },
                    on: {
                      click: () => {
                        this.edit(params.row)
                      },
                    },
                  },
                  "修改"
                ),
                h(
                  "Button", {
                    props: {
                      type: "info",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                      display: params.row.recommend ? "none" : "inline-block",
                    },
                    on: {
                      click: () => {
                        this.handleRecommend(params.row)
                      },
                    },
                  },
                  "好店推荐"
                ),
                h(
                  "Button", {
                    props: {
                      type: "info",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                      display: params.row.recommend ? "inline-block" : "none",
                    },
                    on: {
                      click: () => {
                        this.handleCancelRecommend(params.row)
                      },
                    },
                  },
                  "取消好店推荐"
                ),
                h(
                  "Button", {
                    props: {
                      type: "info",
                      size: "small",
                      ghost: true,
                    },
                    style: {
                      marginRight: "5px",
                    },
                    on: {
                      click: () => {
                        this.qrcode(params.row)
                      },
                    },
                  },
                  "收款码"
                ),
                enableOrDisable,
              ])
            },
          },
        ],
        data: [], // 表单数据
        total: 0, // 表单数据总数
        selectedShop: false, //用于是否选择店铺
      }
    },

    methods: {
      //收款码按钮
      qrcode(row) {
        this.testid = row.id
        this.storeName = row.storeName
        this.qrcodeModalVisible = true
      },
      // 推荐提交事件
      recommendSubmit() {
        this.recommendSubmitLoading = true
        updateRecommendShops(this.recommendForm).then((res) => {
          this.recommendSubmitLoading = false
          if (res && res.success) {
            this.$Message.success("推荐成功！")
            this.recommendCancel()
            this.getDataList()
          } else {
            this.$Message.warning(res.message)
          }
        })
      },
      // 取消推荐
      handleCancelRecommend(row) {
        this.$Modal.confirm({
          title: "确认要取消推荐",
          content: "确认要取消推荐 " + row.storeName + " 吗?",
          loading: true,
          onOk: () => {
            updateRecommendShops({
              storeId: row.id, //商品id
              recommend: false,
              recommendRanking: 0, //推荐等级
            }).then((res) => {
              this.$Modal.remove()
              if (res && res.success) {
                this.$Message.success("取消推荐成功！")
                this.recommendCancel()
                this.getDataList()
              } else {
                this.$Message.warning(res.message)
              }
            })
          },
        })
      },
      //添加推荐弹窗取消事件
      recommendCancel() {
        this.recommendForm = {
          storeId: "", //商品id
          recommend: true,
          recommendRanking: "", //推荐等级
        }
        this.$refs.recommendForm.resetFields()
        this.recommendModalVisible = false
      },
      // 推荐
      handleRecommend(row) {
        this.recommendForm.storeId = row.id
        this.recommendModalVisible = true
      },
      // 选中的地址
      selectedRegionSearch(val) {
        let ids = val[0]
        this.searchForm.regionId = ids[ids.length - 1]
        // this.searchForm.regionId = val[0][val[0].length - 1];
      },
      // 回调给父级
      callback(val) {
        this.$emit("callback", val)
      },
      // 初始化数据
      init() {
        this.getDataList()
      },
      // 分页 改变页码
      changePage(v) {
        this.searchForm.pageNumber = v
        this.getDataList()
      },
      // 分页 改变页数
      changePageSize(v) {
        this.searchForm.pageNumber = 1
        this.searchForm.pageSize = v
        this.getDataList()
      },
      // 搜索
      handleSearch() {
        this.searchForm.pageNumber = 1
        this.searchForm.pageSize = 10
        this.getDataList()
      },
      // 起止时间分别赋值
      selectDateRange(v) {
        if (v) {
          this.searchForm.startDate = v[0]
          this.searchForm.endDate = v[1]
        }
      },
      // 起止时间分别赋值
      selectOrderRange(v) {
        if (v) {
          this.searchForm.orderStartDate = v[0]
          this.searchForm.orderEndDate = v[1]
        }
      },
      // 获取列表数据
      getDataList() {
        this.loading = true
        // 带多条件搜索参数获取表单数据 请自行修改接口
        getShopListData(this.searchForm).then((res) => {
          this.loading = false
          if (res.success) {
            this.data = res.result.records
            this.total = res.result.total
          }
        })
        this.total = this.data.length
        this.loading = false
      },
      // 添加店铺
      add() {
        this.$router.push({
          path: "/shop-operation"
        })
      },
      // 修改店铺
      edit(v) {
        this.$router.push({
          path: "/shop-operation",
          query: {
            shopId: v.id
          }
        })
      },
      // 关闭店铺
      disable(v) {
        this.$Modal.confirm({
          title: "确认关闭",
          content: "您确认要关闭店铺 " + v.storeName + " ?",
          loading: true,
          onOk: () => {
            closeShop(v.id).then((res) => {
              this.$Modal.remove()
              if (res.success) {
                this.$Message.success("操作成功")
                this.getDataList()
              }
            })
          },
        })
      },
      //查看店铺详细
      detail(row) {
        this.$router.push({
          name: "shop-detail",
          query: {
            id: row.id
          }
        })
      },
      // 审核店铺
      audit(v) {
        this.$Modal.confirm({
          title: "审核店铺",
          content: "您确认要审核通过店铺 " + v.storeName + " ?",
          okText: "通过",
          cancelText: "驳回",
          loading: true,
          onOk: () => {
            shopAudit(v.id, 0).then((res) => {
              this.$Modal.remove()
              if (res.success) {
                this.$Message.success("操作成功")
                this.getDataList()
              }
            })
          },
          onCancel: () => {
            shopAudit(v.id, 1).then((res) => {
              this.$Modal.remove()
              if (res.success) {
                this.$Message.success("操作成功")
                this.getDataList()
              }
            })
          },
        })
      },
      // 启用店铺
      enable(v) {
        this.$Modal.confirm({
          title: "确认开启",
          content: "您确认要开启店铺 " + v.storeName + " ?",
          loading: true,
          onOk: () => {
            enableBrand(v.id).then((res) => {
              this.$Modal.remove()
              if (res.success) {
                this.$Message.success("操作成功")
                this.getDataList()
              }
            })
          },
        })
      },
    },
    mounted() {
      this.init()
    },
  };
</script>
<style lang="less" scoped>

</style>